<template>
  <div class="profile-function">
    <h3>常用功能</h3>
    <div class="profile-div">
      <van-grid>
        <van-grid-item
          v-for="(item,index) in uls"
          :key="index"
          :icon="item.icon"
          :text="item.title"
          @click="toDetails(item.title, item.idx)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: 'profileFunction',
  data() {
    return {
      uls: [
        {
          icon: 'gold-coin-o',
          title: '手册',
          idx: 0
        },
        {
          icon: 'star-o',
          title: '常见问题',
          idx: 1
        },
        {
          icon: 'point-gift-o',
          title: '商城',
          idx: 2
        },
        {
          icon: 'gold-coin-o',
          title: '信用',
          idx: 3
        },
        {
          icon: 'star-o',
          title: '客服',
          idx: 4
        },
        {
          icon: 'point-gift-o',
          title: '留言',
          idx: 5
        },
        {
          icon: 'idcard',
          title: '车辆报修',
          idx: 6
        },
        {
          icon: 'idcard',
          title: '反馈',
          idx: 7
        }
      ]
    }
  },
  methods: {
    // 跳转到问题页
    toDetails(title,idx) {
      this.$router.push({
        path: 'function',
        query: {
          title,
          idx
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-function {
  width: 96%;
  margin: 0 auto;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 20px;
  h3 {
    font-size: 14px;
    color: #555;
    padding-left: 14px;
    padding-top: 10px;
    box-sizing: border-box;
  }
  .van-grid {
    // margin: 10px;
    .van-grid-item--square {
      height: $height/2;
      border: 1px solid #fff;
      box-shadow: none;
    }
  }
}
</style>